import Vue from 'vue';
// 根据路由切换组件  导入路由，添加到vue
import VueRouter from 'vue-router'
Vue.use(VueRouter)

import Vuex from 'vuex'

Vue.use(Vuex)
    // 每次进入网站之前  先去找到本地存储的
var list = JSON.parse(localStorage.getItem('list') || '[]')
const store = new Vuex.Store({
    state: { // 这是用来存储商品信息的
        list: list
    },
    mutations: { // 这是用来操作商品数据的
        // c是用来接受组件拼接的商品数据
        // 拼接商品数据   { id: 商品的id, price: 商品的价格, count: 商品的数量, selected: 商品是否选中，默认true }
        increment(state, goodsinfo) {

            // flag 是用来判断购物车里面是否已经含有了该商品
            var flag = false
            state.list.some(item => {
                // 如果购物车里面已经有了该商品，只更新数量
                if (item.id == goodsinfo.id) {
                    item.count += parseInt(goodsinfo.count) // 购物车里面的商品数量等于  添加的
                    flag = true
                    return true
                }
            })

            if (!flag) {
                state.list.push(goodsinfo)
            }
            // console.log(state.list);
            // 将数据进行本地存储
            localStorage.setItem('list', JSON.stringify(state.list))
        },
        // 用来 当购物车里面的数量发生变化时，更新localStorage里面的 count数量
        updataincrement(state, goodsinfo) {

            state.list.some(item => {
                if (item.id == goodsinfo.id) {
                    item.count = parseInt(goodsinfo.count)
                    return true // 跳出选择
                }
            })
            localStorage.setItem('list', JSON.stringify(state.list))
        },
        // 这是用来删除购物车里面的商品的在localStroage里面的信息
        removeincrement(state, id) {

            state.list.some((item, i) => {
                if (item.id == id) {
                    state.list.splice(i, 1)
                    return true
                }
            })
            localStorage.setItem('list', JSON.stringify(state.list))
        },
        // 这是用来实现购物车选中状态
        selectedincrement(state, info) {
            state.list.some(item => {
                if (item.id == info.id) {
                    item.selected = info.selected
                    return true
                }
            })
            localStorage.setItem('list', JSON.stringify(state.list))
        }
    },
    getters: { // 这是用来包装商品数据的
        // 实现购物车徽标的增加  
        optCount(state) {
            var c = 0
            state.list.forEach(item => {
                c += item.count // 循环的添加计算数量
            })
            return c // 返回值是添加到商品购物车的数量
        },
        // 用来拼接出{ id: count} 这样的对象
        shopcount(state) {
            var d = {}
            state.list.forEach(item => {
                d[item.id] = item.count
            })
            return d
        },
        // 用来拼接出 {id: selected} 这样的对象，目的是实现购物车一开始选中的状态
        shopselected(state) {
            var e = {}
            state.list.forEach(item => {
                e[item.id] = item.selected
            })
            return e
        },
        // 实现购物车价格和数量总计
        Allcountprice(state) {
            var f = {
                count: 0,
                price: 0
            }
            state.list.forEach(item => {
                if (item.selected) {
                    f.count += item.count
                    f.price += item.price
                }
            })
            return f
        }

    }
})

// 1
import login from './login.vue'

import './images/8.jpg'
// 2
// 按需引入头部
import { Header } from 'mint-ui';
Vue.component(Header.name, Header);

import './lib/mui/csss/mui.min.css'
import './lib/mui/csss/icons-extra.css'

// 3
import router from './router.js'

// 4
import { Swipe, SwipeItem, Button, Lazyload } from 'mint-ui';

Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);
Vue.component(Button.name, Button);
Vue.use(Lazyload);

import { Switch } from 'mint-ui';

Vue.component(Switch.name, Switch);

// 5
import resourse from 'vue-resource'
Vue.use(resourse)
    // 配置全局的根路由
Vue.http.options.root = 'http://vue.studyit.io/';
// 配置全局的post请求
Vue.http.options.emulateJSON = true;

// 导入格式工具的插件
import moment from 'moment'
// 定义一个全局过滤器
Vue.filter('dataFormate', function(datastr, pattern = "YYYY-MM-DD hh:mm:ss") {
    return moment(datastr).format(pattern)
})


// 缩略图
import VuePreview from 'vue-preview'
Vue.use(VuePreview)


var vm = new Vue({
    el: '#app',
    // render: function(cle) {
    //    return  cle(login)
    // }
    // 渲染到页面
    render: c => c(login),
    router, // 导入路由
    store: store
})